﻿(function () {
    "use strict";


    WinJS.UI.Pages.define("/pages/message/message.html", {

        ready: function (element, options) {
            var nounsList = new WinJS.Binding.List();
            var list = document.querySelector(".message #list").winControl;
            list.itemDataSource = nounsList.dataSource;
            list.itemTemplate = document.querySelector("#template");
            list.selectionMode = WinJS.UI.SelectionMode.none;
            list.tapBehavior = WinJS.UI.TapBehavior.invokeOnly;

            //search
            //Windows.ApplicationModel.Search.SearchPane.getForCurrentView().onquerysubmitted(function(e) {
            //    debugger;
            //});

            //tie up sharing
            Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView().ondatarequested = function (e) {
                //!! When toStaticHTML get's this: '<span class="embeddedIcon"><svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" xmlns:xml="http://www.w3.org/XML/1998/namespace" version="1.1" xmlns:NS1="" NS1:xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:NS2="" NS2:NS1:xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:NS3="" NS3:NS3:xmlns:ns1="" xmlns:NS4="" NS4:NS2:ns1:xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:NS5="" NS5:NS7:xmlns:ns2="" xmlns:NS6="" NS6:xmlns:NS7="" xmlns:NS7="" NS7:NS6:ns2:ns1:xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:NS8="" NS8:xmlns:NS6="" xmlns:NS9="" NS9:NS5:xmlns:ns3="" xmlns:NS10="" NS10:xmlns:NS5="" xmlns:NS11="" NS11:NS4:ns3:xmlns:ns1="" xmlns:NS12="" NS12:xmlns:NS4="" xmlns:NS13="" NS13:xmlns:NS3="" xmlns:NS14="" NS14:xmlns:NS2="" xmlns:NS15="" NS15:xmlns:NS1=""><path d="M 58.393 27.415 c 6.295 2.154 14.649 4.696 16.43 -5.482 c 1.404 -7.899 11.952 -4.971 16.448 -5.483 c 8.137 -0.931 1.998 -16.217 -8.225 -16.442 C 72.699 -0.217 67.99 4.323 63.863 13.708 c -1.961 4.508 -3.647 7.912 -10.953 5.482 c -7.306 -2.435 -12.658 3.566 -8.218 10.959 c 3.934 6.557 -0.062 13.7 -0.062 13.7 h 11.021 c 0 0 -0.088 -4.071 -2.741 -8.224 C 49.812 30.793 51.942 25.192 58.393 27.415 Z" /><path d="M 0 95.587 c 28.35 -20.67 35.432 -49.226 35.432 -49.226 h 29.137 c 0 0 7.081 28.556 35.432 49.226 H 0 Z" /></svg></span>' it strips out the svg
                // must remove all <br> tags, &nbsp; entities, and xml namespace tags to make it safe
                // my question then is "how do I override the call to toStaticHTML when I'm inding declaratively since it's the ListView processing that fetches that

                var html;
                html = q("#input").innerHTML;
                e.request.data.properties.title = "Simbo Message";
                e.request.data.setHtmlFormat(Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.createHtmlFormat(html));
            };

            var selection; //intended to remember where the selection in the #input was

            list.oniteminvoked = function (e) {
                var div = document.createElement("div");
                div.innerHTML = e.target.innerHTML;
                var span = document.createElement("span");
                span.classList.add("embeddedIcon");
                span.innerHTML = q("div#svg", div).innerHTML.trim();
                MSApp.execUnsafeLocalFunction(function () {
                    var sel = document.selection.createRange();
                    sel.pasteHTML(span.outerHTML);
                    sel.moveEnd('character', 1);
                    if (sel.text !== " ") {
                        sel.moveEnd('character', -1);
                        sel.pasteHTML("&nbsp;");
                    }
                    sel.moveEnd('character', 1);
                    selection = sel;
                });
            };

            q("#input").onkeypress = function (e) {
                if (e.key == "Spacebar") {
                    //TODO: user pressed the space bar, so look to see if an icon exists for the last word typed and insert it if it does
                }
            };

            //this is a little hacky, but anytime the #input loses focus I just give it focus back
            q("#input").onblur = function (e) {
                e.srcElement.focus();
                if (selection) selection.select();
            };

            //get icons from thenounproject.com
            for (var i = 3; i <= 3; i++) {
                WinJS.xhr({ url: "http://thenounproject.com/retrieve/partial/0/?svg=true", responseType: "document" })
                    .done(
                        function (xhr) {
                            var nouns = q("div.noun", xhr.response);
                            nouns.forEach(function (n) {

                                //get the noun detail page to get lots of meta info about it
                                //WinJS.xhr({ url: "http://thenounproject.com" + q("div.noun a.group", xhr.response).href, responseType: "document" }).done(function (xhr) {
                                //    var doc = xhr.response;
                                //});

                                var svg = q("a.group", n).innerHTML.trim();
                                if (svg.search("xmlns:NS") == -1) // hide the ones that have xmlns:NS because they won't pass the toStaticHTML and the image won't display
                                    nounsList.push({
                                        id: n.id.substr(5),
                                        name: q("a.noun-name", n).innerText,
                                        svg: toStaticHTML(svg)
                                    });
                            });
                        },
                        function (err) {
                            var msg = q("#message");
                            msg.innerText = "No Internet? Are you in the boonies?";
                            msg.style.display = "block";
                        }
                    );
            }
            q("#input").focus();
        },

        updateLayout: function () {
        }
    });
})();
